<template>
  <div class="contracting-manager">
    <div class="contracting-container">
      <div class="filter-container">
        <el-form :model="tableParams" label-width="80" ref="paramsRef">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="商品名称" prop="productName">
                <el-input placeholder="请输入" v-model="tableParams.productName" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品分类" prop="productCategoryId">
                <el-cascader
                  style="width: 100%"
                  :options="classify"
                  v-model="tableParams.productCategoryId"
                  :props="{ label: 'name', value: 'categoryId' }"
                  :show-all-levels="false"
                  clearable
                  filterable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否有发包价" label-width="120" prop="contractPrice">
                <el-select placeholder="请选择" v-model="tableParams.contractPrice">
                  <el-option label="是" :value="true" />
                  <el-option label="否" :value="false" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="filter-container-buttons">
                <el-button type="primary" :icon="Search" @click="handelSearch">查询</el-button>
                <el-button type="primary" plain :icon="RefreshRight" @click="handelReset">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tabs-sticky">
        <div class="tabs-content">
          <div class="tabs-content-active">
            <div style="margin-right: 10px">商品来源：</div>
            <div
              @click="handleSourceType(1)"
              style="margin-right: 17px"
              class="tabs-content-but"
              :class="{ 'but-active': tableParams.sourceType === 1 }"
            >
              工厂上架
            </div>
            <div @click="handleSourceType(2)" class="tabs-content-but" :class="{ 'but-active': tableParams.sourceType === 2 }">
              自己上架
            </div>
          </div>
          <div>
            <el-button type="primary" plain @click="handelExport">批量导出</el-button>
            <el-button type="primary" plain @click="handelOpen">Excel批量定价</el-button>
          </div>
        </div>
      </div>
      <div class="table-container" element-loading-text="数据加载中..." v-loading="isLoadingTable">
        <el-table
          ref="reformTableRef"
          :data="tableData"
          stripe
          border
          style="width: 100%"
          :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
          :height="tableHeight"
        >
          <el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
          <el-table-column prop="bandName" label="品牌" show-overflow-tooltip />
          <el-table-column prop="modeCode" label="型号" show-overflow-tooltip />
          <el-table-column prop="skuCode" label="SKU编码" show-overflow-tooltip />
          <el-table-column prop="properties" label="规格" show-overflow-tooltip />
          <el-table-column prop="clinetPrice" label="销售价" show-overflow-tooltip />
          <el-table-column prop="factoryPrice" label="工厂成本价" show-overflow-tooltip />
          <el-table-column prop="contractPrice" label="发包价" show-overflow-tooltip>
            <template #default="{ row }">
              <el-input-number
                v-model="row.contractPrice"
                :min="0"
                :controls="false"
                placeholder="请输入"
                @change="e => handleChange(e, row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <custom-pagination
      v-if="tableData.length > 0"
      :total="listTotal"
      v-model:limit="tableParams.size"
      v-model:page="tableParams.current"
      layout="total, slot, prev, pager, next, jumper"
      @pagination="handelPage"
    >
    </custom-pagination>
    <ImportDialog v-model:visible="visible" v-if="visible" @handelExport="handelExport" @handelSearch="handelSearch" />
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";
import { RefreshRight, Search } from "@element-plus/icons-vue";
import ImportDialog from "./components/importDialog/index.vue";
import { getCategoryTree, managementExport, managementList, update } from "@/apis/biddingManagement";
import { documentFlow } from "@/utils/downFile";
import { ElMessage } from "element-plus";

const classify = ref([]);
const isLoadingTable = ref(false);
const visible = ref(false);
const tableHeight = ref(100);
const paramsRef = ref();
const tableData = ref([]);
const listTotal = ref(0);
const tableParams = ref({
  size: 10,
  current: 1,
  sourceType: 1,
  contractPrice: ""
});
const handleChange = async (e, row) => {
  try {
    await update({ id: row.id, contractPrice: e });
    ElMessage.success("保存成功");
  } catch (e) {
    handelPage();
  }
};
const handleSourceType = type => {
  tableParams.value.sourceType = type;
  handelSearch();
};
const handelPage = () => {
  getManagementList();
};
// 导出
const handelExport = async () => {
  const res = await managementExport(tableParams.value);
  documentFlow(res, "发包价管理", "xlsx");
};
//导入
const handelOpen = () => {
  visible.value = true;
};
/**
 *  获取分类
 */
const getClassify = async () => {
  const res = await getCategoryTree();
  classify.value = res.data;
};
const getManagementList = async () => {
  isLoadingTable.value = true;
  if (tableParams.value.productCategoryId) {
    if (tableParams.value.productCategoryId.constructor === Array) {
      tableParams.value.productCategoryId = tableParams.value.productCategoryId[tableParams.value.productCategoryId.length - 1];
    }
  }
  const { data } = await managementList(tableParams.value);
  isLoadingTable.value = false;
  tableData.value = data.list;
  listTotal.value = data.total;
};
const handelSearch = () => {
  tableParams.value.current = 1;
  getManagementList();
};
const handelReset = () => {
  paramsRef.value.resetFields();
  tableParams.value.sourceType = 1;
  handelSearch();
};
getClassify();
getManagementList();
const setHeight = () => {
  nextTick(() => {
    tableHeight.value = document.documentElement.clientHeight - 420;
  });
};
setHeight();
</script>

<style scoped lang="scss">
@use "index";
</style>
